<template>
  <div class="labelhandle" id="labelhandle">
    <div class="labelhandle_box">
      <div class="header_box"></div>
      <div class="header_inner">
        <div>
          <a-button type="primary" @click="createLabel">创建标签</a-button>
        </div>
        <div>
          <a-input-search placeholder style="width: 200px;margin-right:10px" v-model="searchData" @search="onSearch" />
          <a-button icon="redo" @click="redo"></a-button>
        </div>
      </div>
      <div class="main_box">
        <a-table class="a_table" :columns="columns" :data-source="data" :rowKey="data.key">
          <a slot="action1" slot-scope="col" href="javascript:;" @click="editLabel(col)">编辑</a>
          <a slot="action2" href="javascript:;" slot-scope="col" @click="delectLabel(col)">删除</a>
        </a-table>
      </div>
    </div>

    <!-- 编辑面板 -->
    <a-modal title="编辑标签" :visible="visible" @ok="handleOk" @cancel="handleCancel">
      <div class="edit_box">
        <p style>
          <span>
            <i style="color:red">*</i>标签名称
          </span>
          <a-input style="width:70%;margin-left:20px" v-model="editData"></a-input>
        </p>
      </div>
    </a-modal>

    <!-- 添加面板 -->
    <a-modal title="添加标签" :visible="visible2" @ok="handleOk2" @cancel="handleCancel2">
      <div class="edit_box">
        <p style>
          <span>
            <i style="color:red">*</i>标签名称
          </span>
          <a-input style="width:70%;margin-left:20px" v-model="addLabelData"></a-input>
        </p>
      </div>
    </a-modal>
  </div>
</template>

<script>
const columns = [
  {
    title: '标签名称',
    dataIndex: 'LabelName',
    width: 100
  },
  {
    title: '标签ID',
    dataIndex: 'LabelType',
    width: 100
  },
  {
    title: '创建时间',
    dataIndex: 'LabelTime',
    width: 100
  },
  {
    title: '操作',
    key: '11',
    fixed: 'right',
    width: 100,
    ellipsis: true,
    scopedSlots: { customRender: 'action1' }
  },
  {
    title: '',
    key: '12',
    fixed: 'right',
    width: 100,
    scopedSlots: { customRender: 'action2' }
  }
]

export default {
  data() {
    return {
      data: [
        {
          key: 1,
          LabelName: '22',
          LabelType: '22',
          LabelTime: '22'
        },
        {
          key: 2,
          LabelName: '22',
          LabelType: '22',
          LabelTime: '22'
        }
      ],
      columns,
      visible: false,
      visible2: false,
      editData: '',
      searchData: '',
      addLabelData: ''
    }
  },
  methods: {
    // 打开编辑面板
    editLabel(item) {
      this.visible = true
      this.editData = item.LabelName
    },
    // 确认编辑
    handleOk() {
      this.visible = false
      console.log('修改的数据' + this.editData)
    },
    // 取消编辑
    handleCancel() {
      this.visible = false
      this.editData = ''
    },

    // 删除数据
    delectLabel(item) {
      console.log('删除的数据' + item)
    },


    // 打开创建标签按钮
    createLabel() {
      this.visible2 = true
    },
    // 确认添加标签
    handleOk2() {
      this.visible2 = false
      console.log('添加的标签：' + this.addLabelData)
      this.addLabelData = ''
    },
    // 取消添加
    handleCancel2() {
      this.visible2 = false
      this.addLabelData = ''
    },

    // 搜索信息
    onSearch() {
      console.log("搜索的信息是：" + this.searchData);
      this.searchData = ''
      
    },

    // 刷新按钮
    redo() {
      console.log("刷新信息");
      
    }
  }
}
</script>

<style>
.labelhandle {
  margin: 40px;
  min-height: calc(100vh - 59px);
}
.labelhandle_box {
  width: 100%;
  height: 800px;
  /* box-shadow: 0px 0px 5px gray; */
}
.header_box {
  /* width: 96%;
  margin: 0 auto;
  padding-top: 10px;
  display: flex;
  justify-content: space-between; */
}
.header_inner {
  width: 96%;
  margin: 0 auto;
  padding-top: 10px;
  display: flex;
  justify-content: space-between;
}

.main_box {
  width: 96%;
  margin: 0 auto;
  margin-top: 10px;
}
.edit_box {
  width: 80%;
  margin: 0 auto;
}
</style>